<template>
    <div class="tech-after-sale-type">
        <TechPanel class="goods-list" title="售后商品" :isBold="true" :mode="mode">
            <ServerGoodsInfo v-for="(item, index) in goodsList" :isBlock="false" :key="index" :info="item" />
        </TechPanel>
        <ServerTypeItem label="仅退款（无需退货）" @click="oneType" />
        <ServerTypeItem label="退货退款" @click="twoType" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { TechPanel } from '@components/base';
import ServerGoodsInfo from './aftersale/ServerGoodsInfo';
import ServerTypeItem from './aftersale/ServerTypeItem';
import { setTitle } from '@common/utils';
import { SHOP_ORDER_AFTER_SALE_TYPE } from '@constants/shop';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import logger from '@common/logger';
export default {
    name: 'AfterSaleListType', // 选择退款类型-多个商品
    components: {
        TechPanel,
        ServerGoodsInfo,
        ServerTypeItem,
    },
    data() {
        return {
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            afterSaleOrderInfo: state => state.shopOrder.afterSaleOrderInfo,
        }),
        goodsList() {
            logger.info('多商品售后：', this.afterSaleOrderInfo.details);
            return this.afterSaleOrderInfo.details;
        },
    },
    created() {
        setTitle('选择退款类型');
    },
    methods: {
        ...mapActions([
            'setAfterSaleType',
        ]),
        oneType() {
            this.setAfterSaleType(SHOP_ORDER_AFTER_SALE_TYPE.onlyRefund);
            this.gotoAfterSalePage();
        },
        twoType() {
            this.setAfterSaleType(SHOP_ORDER_AFTER_SALE_TYPE.refundAndSale);
            this.gotoAfterSalePage();
        },
        gotoAfterSalePage() {
            this.$router.push('/shop-order/after-sale/apply-list');
        },
    },
};
</script>

<style lang="less" scoped>
.tech-after-sale-type {
    .p-v(@shop-bag-gap);
}
</style>
